<template>
  <div class="home">
    <h3>欢迎来到编辑页面！</h3>
    <div id="demo1"></div>
    <el-button type="primary" class="btn" @click="getEditorData"
      >上传当前内容</el-button
    >
    <!-- <h3>内容预览</h3> -->
    <!-- <textarea name="" id="" cols="170" rows="20" readonly v-model="editorData"></textarea> -->
  </div>
</template>

<script>
// 引入 wangEditor
import wangEditor from "wangeditor";

export default {
  data() {
    return {
      editor: null,
      editorData: "",
    };
  },
  mounted() {
    this.createWangEditor();
  },
  methods: {
    // 初始化富文本插件
    createWangEditor() {
      const editor = new wangEditor(`#demo1`);

      // 配置 onchange 回调函数，将数据同步到 vue 中
      editor.config.onchange = (newHtml) => {
        this.editorData = newHtml;
      };
      // 设置编辑区域高度为
      editor.config.height = 900;

      // 创建编辑器
      editor.create();

      this.editor = editor;
    },
    getEditorData() {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html();
      // alert(data)
      // 向后台发送富文本
      this.$http({
        method: "post",
        url: "http://localhost:8070/path/fileList",
        data: data,
      }).then(
        (res) => {
          console.log(res.data);
        },
        (err) => {
          console.log(err);
        }
      );
      // 发送请求后跳转到专栏页面
      this.ArticlesColumnsVuePage();
    },
    // 跳转到word专栏页面
    ArticlesColumnsVuePage() {
      console.log("跳转到专栏页面");
      // 虽然实现了跳转，但是不是跳转到上传后的页面，需要改
      this.$router.replace('/articlescolumns');
    },
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy();
    this.editor = null;
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  margin: auto;
  position: relative;
  .btn {
    position: absolute;
    margin: 8px 10px 0 8px;
    right: 0;
    top: 0;
    padding: 5px 10px;
    cursor: pointer;
  }
  h3 {
    font-size: 20px;
    margin: 30px 0 15px;
  }
  #demo1 {
    min-height: 100px;
  }
}
</style>
